<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>

<html lang="en">
<head>
	<head th:include="header::header"></head>
	<title>普惠商城-个人中心-账户设置-账户安全-支付密码</title>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div  th:include="personal/personalhead::order-personalhead-nav"></div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div  th:include="personal/personalsearch::order-personalsearch-nav"></div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
		<div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
		<div class="centerbody personal_middle_main">
			<div class="personal_middle_main_tit">
				<span>帐户设置</span>><span>帐户安全</span>><span>设置支付密码</span>
			</div>
			<!-- 订单tab标签 -->
			<div data-role="page">
        		<div data-role = "content-floud">
					<div class="publicBox">
						<div class="realName pad_20">
							<span th:if = "${member}">
								<p class="realNameForm">
									<label>手机号：</label>
									<input type="text" th:value="${member.memberPhone}" readonly="readonly" id = "orig_phone">
								</p>
							</span>
							<p class="realNameForm">
								<label>新密码：</label>
								<input type="password" value="" placeholder="密码为长度6位的数字" id = "new_pwdo" maxlength="6">
							</p>
							<p class="realNameForm">
								<label>确认密码：</label>
								<input type="password" value="" placeholder="密码为长度6位的数字" id = "new_pwdt" maxlength="6">
							</p>
							<p class="realNameForm">
								<label>手机验证码：</label>
								<span class="reaCodeBox">
									<input class="realTxtCode" type="text" value="" placeholder="请输入验证码" id = "sms_code">
									<em class="realNameCode">获取验证码</em>
								</span>
							</p>
							<p class="realNameBut"><button name="" id = "update_paypwd_sub">设置</button></p>
						</div><!--LineConf-->
					</div><!--个人信息-->
				</div>
				<!-- token -->
				<input type="hidden" id="user_token"/>
   			 </div>
			<!-- 全部订单 -->
			
		</div>
		<div style="clear:both;"></div>
	</div>
	
	<!-- 页面底部 -->
	<div th:include="footer::footer"></div>

</body>
<script th:inline="javascript">
$(function(){
	/*tab标签切换*/
    function tabs(tabTit,on,tabCon){
        $(tabCon).each(function(){
            $(this).children().eq(0).show();
        });
        $(tabTit).each(function(){
            $(this).children().eq(0).addClass(on);
        });
        $(tabTit).children().click(function(){
            $(this).addClass(on).siblings().removeClass(on);
            var index = $(tabTit).children().index(this);
            $(tabCon).children().eq(index).show().siblings().hide();
        });
    }
    tabs(".LineTitle","Line_on",".LineCon");
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
   		$('input.paybutton').eq(0).addClass('choose');
   		
   		$('input.paybutton').hover(function(){
   			$(this).addClass('choose');
   			$(this).siblings().removeClass('choose');
   		},function(){
   			$(this).removeClass('choose');
   		})
    	$('.cancel_small').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
		
		$('.add_info').click(function(){
			$('.shadow').css('display','block');
			$('.login_box_2').css('display','block');
		})
		$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		})
		 $("#hear li").click(function(){
    $(this).css({
         borderBottom: "2px solid red",
         height:"43px"
    }).siblings().css({
        borderBottom: "none",
        height:"45px"
    });
});                
                         
$("#hear li").click(function(){
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#contentop li").eq(index).css("display","block").siblings().css("display","none");
        });
})
// 获取短信验证码标记
var validCode = true;
// tips 标记
var tipsIndex;
$(function(){
	SetUpPayPwd.bingClosetipsIndex();
});
$(".realNameCode").click (function  () {
	SetUpPayPwd.callvalidCode();
})
// 设置支付密码
var SetUpPayPwd = {
	// 发送短信
	callvalidCode : function(){
		var time = 30;
		var code = $(".realNameCode");
		if (validCode) {
			validCode = false;
			if(!SetUpPayPwd.isNotNull("orig_phone")){
				validCode = true;
				return;
			}
			if(!SetUpPayPwd.verifyPayPwd()){
				validCode = true;
				return;
			}
			$.ajax({
				url : "/member/sendSmsCode",
				type : "post",
				dataType : "json",
				data : {
					"phone" : $('#orig_phone').val()
				},
				error : function() {
					layer.msg("系统繁忙，请稍后再试！");
					validCode = true;
				},
				success : function(data) {
					if (data.code == "200") {
						$("#user_token").val(data.token);
						code.addClass("msgs1");
						var t = setInterval(function() {
							time--;
							code.html(time + "秒");
							if (time == 0) {
								clearInterval(t);
								code.html("重新获取");
								validCode = true;
								code.removeClass("msgs1");
							}
						}, 1000)
					} else {
						layer.msg(data.message);
						validCode = true;
					}
				}
			});
		}
	},//非空验证
	isNotNull : function(id){
		var flag = true;
		var val = $('#'+id).val();
		if(val.trim().length < 1){
			tipsIndex = layer.tips("此处不能为空","#"+id,{tips: 2});
			flag = false;
		}
		return flag;
	},
	bindFocus : function(id){
		$("#"+id).off("focus");
		$("#"+id).on("focus",function(){
			if(tipsIndex){
				layer.close(tipsIndex);
			}
		})
	},
	bingClosetipsIndex : function(){
		var ids = ["new_pwdo","new_pwdt","sms_code"];
		for(var i=0;i<ids.length;i++){
			SetUpPayPwd.bindFocus(ids[i]);
		}
	},
	equel : function(){
		var flag = true;
		var new_pwdo = $('#new_pwdo').val();
		var new_pwdt = $('#new_pwdt').val();
		if(new_pwdo != new_pwdt){
			var newPwdIndex = layer.tips("确认密码不匹配","#new_pwdt",{tips: 2});
			$('#new_pwdt').on("focus",function(){
				layer.close(newPwdIndex);
			});
			flag = false;
		}
		return flag;
	},// 修改支付密码正式提交
	updatesub : function(){
		var orig_phone = $("#orig_phone").val();
		var new_pwdo = $("#new_pwdo").val();
		$.ajax({
			url:"/account/setUpPayPwdSubmit",
			type:"post",
			dataType:"json",
			data:{"phone":orig_phone,"newPwd":new_pwdo,"token":$("#user_token").val()},
			error:function(){
				layer.msg("系统繁忙，请稍后再试！");
			},
			success:function(data){
				if(data.code == "200"){
					window.location.href="/account/commonPrompt?pCode=1";
				}else{
					layer.msg("系统繁忙，请稍后再试！");
				}
			}
		});
	},// 校验支付密码
	verifyPayPwd : function(){
		var flag = true;
		var payPwd = $("#new_pwdo").val().trim();
		if(payPwd.length<6 || isNaN(payPwd)){
			tipsIndex = layer.tips("密码格式错误，必须为6为纯数字","#new_pwdo",{tips: 2});
			flag = false;
		}
		return flag;
	}
}

$('#update_paypwd_sub').click(function(){
	if(SetUpPayPwd.isNotNull("orig_phone") && SetUpPayPwd.isNotNull("new_pwdo") 
			&& SetUpPayPwd.verifyPayPwd() && SetUpPayPwd.isNotNull("new_pwdt") 
			&& SetUpPayPwd.equel() && SetUpPayPwd.isNotNull("sms_code")){
		$('#update_paypwd_sub').attr("disable", true);
		$.ajax({
			url : "/member/verifySmsCode",
			type : "post",
			dataType : "json",
			data : {
				"phone" : $('#orig_phone').val(),
				"smsCode" : $('#sms_code').val()
			},
			error : function() {
				layer.msg("系统繁忙，请稍后再试！");
				$('#update_paypwd_sub').attr("disable", false);
			},
			success : function(data) {
				$('#update_paypwd_sub').attr("disable", false);
				if (data.code == "200") {
					SetUpPayPwd.updatesub();
				} else {
					layer.msg(data.message);
				}
			}
		});
	}
});

</script>

</html>